<template>
  <div class="yz-bottom-tol" @click="hideOrShowMenu" :style="{'bottom':bottomValue}">
    <div class="yz-bottom-tol-icon"></div>
  </div>
  <div class="yz-bottom" v-show="showBottomMenu !== '0'">
    <div class="yz-bottom-navs">
      <!-- <div class="yz-box-nav" @click="toRouter('main')">
        <div class="icon">
          <img alt="首页" src="../../assets/img/bottom/1.png"/>
        </div>
      </div> -->
      <div class="yz-box-nav" @click="toRouter('headquarters')" title="综合看板">
        <div class="icon">
          <img alt="综合" src="../../assets/img/bottom/zonghe.png" />
        </div>
      </div>
      <div class="yz-box-nav"  @click="toRouter('yzClientFlow')" title="客流看板">
        <div class="icon">
          <img alt="客流" src="../../assets/img/bottom/keliu.png"/>
        </div>
      </div>
      <div class="yz-box-nav"  @click="toRouter('yzTraffic')" title="车流看板">
        <div class="icon">
          <img alt="车流" src="../../assets/img/bottom/cheliu.png" />
        </div>
      </div>
      <div class="yz-box-nav" @click="toRouter('yzSale')" title="销售看板">
        <div class="icon">
          <img src="../../assets/img/bottom/xiaoshou.png" />
        </div>
      </div>
      <div class="yz-box-nav"  @click="toRouter('energy')" title="能耗看板">
        <div class="icon">
          <img src="../../assets/img/bottom/nenghao.png" />
        </div>
      </div>
     
      <div class="yz-box-nav" @click="toRouter('basePanel2')" title="基础数据看板">
        <div class="icon">
          <img alt="基础数据" src="../../assets/img/bottom/jichushuju.png" />
        </div>
      </div>

      <!--<div class="yz-box-nav">
        <div class="icon">
          <img src="../../assets/img/bottom/8.png" />
        </div>
      </div>
      <div class="yz-box-nav">
        <div class="icon">
          <img src="../../assets/img/bottom/9.png" />
        </div>
      </div>
      <div class="yz-box-nav">
        <div class="icon">
          <img src="../../assets/img/bottom/10.png" />
        </div>
      </div>
      <div class="yz-box-nav" @click="toRouter('parking')">
        <div class="icon">
          <img src="../../assets/img/bottom/11.png" />
        </div>
      </div>
      <div class="yz-box-nav" @click="toRouter('toilet')">
        <div class="icon">
          <img src="../../assets/img/bottom/12.png" />
        </div>
      </div>
      <div class="yz-box-nav">
        <div class="icon">
          <img src="../../assets/img/bottom/13.png" />
        </div>
      </div> -->
    </div>
  </div>
</template>
<script setup>
import router from "../../router/index.js";
import { useRoute } from 'vue-router'
import {ref} from "vue";
const route = useRoute()
let showBottomMenu = ref(route.query.showBottomMenu);
const bottomValue = ref('0vh');
if (!showBottomMenu.value || showBottomMenu.value === '1'){
  bottomValue.value = '5vh';
}
//隐藏或者显示
const hideOrShowMenu = ()=>{
  if (!showBottomMenu.value || showBottomMenu.value === '1'){
    bottomValue.value = '0';
    showBottomMenu.value = '0';
  }else if (showBottomMenu.value === '0'){
    bottomValue.value = '5vh';
    showBottomMenu.value = '1';
  }
}

//跳转函数
const toRouter = (url) => {
  router.push({name: url})
}
</script>
<style scoped>
.yz-bottom-tol{
  display: flex;
  position: fixed;
  bottom: 5vh;
  width: 100%;
  .yz-bottom-tol-icon{
    background: url("../../assets/img/public/com_bottom.png") no-repeat;
    background-size: 100% 100%;
    width: 10vh;
    height: 1.5vh;
    margin: 0 auto;
    cursor: pointer;
  }
}
.yz-bottom{
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  .yz-bottom-navs{
    display: flex;
    background: rgba(26,75,83,0.48);
    border: 1px solid rgba(0,234,255,0.51);
    box-shadow: inset 0 0 12px 6px rgba(0,234,255,0.50);
    border-radius: 10px 10px 0 0;
    padding-right: 1vh;
    .yz-box-nav{
      cursor: pointer;
      .icon{
        width: 40px;
        text-align: center;
        padding-top: 1.5vh;
      }
    }
  }
}

</style>
